/**
 * 自主练习
 */
import React from 'react';
import { connect } from 'react-redux';

import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';

import { StudentFilter } from '../../components/smart/filter';
import ChartGroup from '../../components/smart/ChartGroup';

import PracticeLineAreaChart from '../../components/dump/charts/PracticeLineAreaChart';
import NewMissionLineAreaChart from '../../components/dump/charts/NewMissionLineAreaChart';
import MissionLineAreaChart from '../../components/dump/charts/MissionLineAreaChart';
import PKLineAreaChart from '../../components/dump/charts/PKLineAreaChart';

import omit from 'lodash/object/omit';

import { ENUM_VIEW, DATE_FORMATTER } from '../../../schema/constants';
import { setCondition } from '../../actions/fixup-work/conditionAction';
import moment from 'moment';

import * as ACTIONS from '../../actions/independent-practice/practiceAction';

const map = {
    // 邀请教师统计
    [ACTIONS.TypeOption.Practice]: 'optPracticeData',
    // 手机号
    [ACTIONS.TypeOption.Mission]: 'optMissionData',
    // 邀请码
    [ACTIONS.TypeOption.PK]: 'optPKData'
};

const url = {
    // 邀请教师统计
    [ACTIONS.TypeOption.Practice]: ACTIONS.PRACTICE_URL,
    // 手机号
    [ACTIONS.TypeOption.Mission]: ACTIONS.MISSION_URL,
    // 邀请码
    [ACTIONS.TypeOption.PK]: ACTIONS.PK_URL
};

function mapStateToProps(state) {
	return {
		condition: state.chart.condition,
		practice: state.practice
	};
}

function getData(condition, userParams) {
    return ACTIONS.getPracticeData(url[userParams.currentOptionID], map[userParams.currentOptionID], {
        condition: omit(condition, 'dataOptions'),
        ...userParams
    });
}

class index extends React.Component {

	constructor(props) {
		super(props);
	}

	state = {
		currentOptionID: ACTIONS.TypeOption.Practice,
		currentTimeUnit: ENUM_VIEW.DAY
	};

	// 切换类型选项卡
    handleViewChange = (option) => {
        let { dispatch, condition } = this.props;

        this.setState({
            currentOptionID: option,
            currentTimeUnit: ENUM_VIEW.DAY
        }, () => {
            // get data
            dispatch(getData(condition, this.state));
        });
    };

    // 切换时间颗粒度
    handleTimeUnitChange = (option) => {
        let { dispatch, condition } = this.props;

        this.setState({
            currentTimeUnit: option
        }, () => {
            // get data
            dispatch(getData(condition, this.state));
        });
    };

    // 处理日期范围变化
    handleDateRangeChange = (startDate, endDate) => {
        let { dispatch } = this.props;

        let action = setCondition('startDate', moment(startDate).format(DATE_FORMATTER));
        dispatch(action);

        action = setCondition('endDate', moment(endDate).format(DATE_FORMATTER));
        dispatch(action);

        setTimeout(() => {
            // get data
            let { condition } = this.props;
            dispatch(getData(condition, this.state));
        }, 0);
    };

    // 点击高级筛选条件查询按钮
    handleSearch = () => {
        let { dispatch, condition } = this.props;

        // get data
        dispatch(getData(condition, this.state));
    };

    componentWillMount() {
        let { dispatch, condition } = this.props;
        // get data
        dispatch(getData(condition, this.state));
    }

	render() {
		let { practice, condition } = this.props;
        let { startDate, endDate } = condition;
        let { currentOptionID, currentTimeUnit } = this.state;

        let { options, optPracticeData, optMissionData, optPKData } = practice;

        let typeOptions = options.map((item, index) => <Tab key={index} label={item.label} value={item.ID} />);

        return (
            <div className='panel'>
                <StudentFilter onSearch={this.handleSearch} />
                <ChartGroup
                    onDateRangeChange={this.handleDateRangeChange}
                    startDate={startDate}
                    endDate={endDate}>
                    <Tabs
                        onChange={this.handleViewChange}
                        value={currentOptionID}>
                        {typeOptions}
                    </Tabs>
                    <Tabs
                        onChange={this.handleTimeUnitChange}
                        value={currentTimeUnit}>
                        <Tab label='日' value={ENUM_VIEW.DAY}></Tab>
                        <Tab label='周' value={ENUM_VIEW.WEEK}></Tab>
                        <Tab label='月' value={ENUM_VIEW.MONTH}></Tab>
                    </Tabs>
                    <div className='chart'>
                        {currentOptionID == ACTIONS.TypeOption.Practice &&
                        <PracticeLineAreaChart
                            title='自主练习'
                            subtitle=''
                            dataSource={optPracticeData.data} />
                        }
                        {currentOptionID == ACTIONS.TypeOption.Mission &&
                        [<NewMissionLineAreaChart
                            key={0}
                            title='新闯关'
                            subtitle=''
                            dataSource={optMissionData.data} />
                        ,
                        <MissionLineAreaChart
                            key={1}
                            title='全部闯关'
                            subtitle=''
                            dataSource={optMissionData.data} />]
                        }
                        {currentOptionID == ACTIONS.TypeOption.PK &&
                        <PKLineAreaChart
                            title='PK'
                            subtitle=''
                            dataSource={optPKData.data}/>
                        }
                    <div style={{textAlign: 'center'}}>注：所有业务数据时间均以用户注册时间为准</div>
                    </div>
                </ChartGroup>
            </div>
		);
	}
}

export default connect(
	mapStateToProps,
	// Implement map dispatch to props
)(index)
